<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- MD5 工具类 -->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>

    <!-- 表单事件绑定 onsubmit ，可以拦截表单-->
    <form action="#" method="post" onsubmit="return aaa()">
    <p>
        <span>用户名：</span><input type="text" name="username" id="username">
    </p>
    <!--
    <p>
        <span>密码：</span><input type="password" name="password" id="password">
    </p>
    -->
    <p>
        <span>密码：</span><input type="password" id="input-password">
    </p>
        <input type="password" hidden name="password" id="md5-password">
        <!-- 绑定时间 onclick 被点击
        <button type="submit" onclick="aaa()">提交</button>
        -->
        <button type="submit">提交</button>
    </form>

    <script>
        function aaa() {
            let username = document.getElementById('username');
            let inputPassword = document.getElementById('input-password');
            let md5Password = document.getElementById('md5-password');
            console.log(username.value);
            console.log(inputPassword.value);
            // MD5 算法
            md5Password.value = md5(inputPassword.value);
            alert(md5Password.value)

            return false;    // 表单会被拦截，提交不过去
            // 表单正常提交   return true;
        }
    </script>
</body>
</html>